 
/**
 * 限制input框，仅能输入数字。默认限制输入整数，可以通过传参设置小数位数
 * v-number 限制整数，v-number:2 限制两位小数，v-number:2=3 限制两位小数，整数位三位，v-number=2 限制两位整数\
 * 
*/
import type { Directive, DirectiveBinding } from "vue";
interface ElType extends HTMLElement {
  __handleInput__: () => any;
}
// 根据el获取input
const getInput = (el: HTMLElement): HTMLInputElement | null => el instanceof HTMLInputElement ? el : el.querySelector('input');
  const number: Directive = {
    mounted(el: ElType, binding: DirectiveBinding) { 
        const input: HTMLInputElement = <HTMLInputElement>getInput(el);
        if(input){
          const intNum=binding.value,
          floatNum=binding.arg;  
           // 小数正则
          const decimal: string = floatNum ? `(\\.\\d{0,${floatNum}})?` : ''
          // 整数正则
          const integer: string = intNum ? `(0|[1-9]\\d{0,${intNum - 1}})` : '\\d*'
          const regExp: RegExp = new RegExp((integer + decimal), 'g')
          el.__handleInput__=function(){ 
          // 替换所有的非数字项 
          // 如果输入的数字不符合正则表达式，则替换为'' 
             input.value = input.value.toString().trim().replace(/[^\d.]/g, '')?.match?.(regExp)?.[0] ?? ''
         
            }; 
          el.addEventListener("input",el.__handleInput__);
        }
     
    },
 
    beforeUnmount(el: ElType) {
       // 解除绑定的时候去除事件
       const input: HTMLInputElement = <HTMLInputElement>getInput(el)
      el.removeEventListener("input",el.__handleInput__);
    }
  };
  
 
  
  export default number;